<template>
  <!-- 表格部分 -->
  <div class="tablePage">
    <!-- 商品回收站头部切换展示 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="商品管理" name="first">
        <el-table
          :data="commidList"
          style="width: 100%"
        >
          <el-table-column
            label="日期"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 5px">{{ scope.row.dataTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="ID"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 5px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <!-- 商品图 -->
          <el-table-column
            label="商品图"
            width="120"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 80px"
                :src="scope.row.avatar"
              />
            </template>
          </el-table-column>
          <!-- 商品名称 -->
          <el-table-column
            label="商品名称"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 5px">{{ scope.row.goodsName }}</span>
            </template>
          </el-table-column>
          <!-- 商品售价 -->
          <el-table-column
            label="商品售价"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <!-- 销量 -->
          <el-table-column
            label="销量"
            width="80"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sales }}</span>
            </template>
          </el-table-column>
          <!-- 库存 -->
          <el-table-column
            label="库存"
            width="80"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.stock }}</span>
            </template>
          </el-table-column>
          <!-- 排序 -->
          <el-table-column
            label="排序"
            width="80"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sort }}</span>
            </template>
          </el-table-column>
          <!-- 状态管理 -->
          <el-table-column
            label="状态"
            width="80"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.value"
                active-color="#4381e6"
                inactive-color="#ff4949"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit( scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >加入回收站</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <el-tab-pane label="商品回收站" name="second">
        <el-table
          :data="recyleList"
          style="width: 100%"
        >
          <el-table-column
            label="日期"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 5px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="ID"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 5px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <!-- 商品图 -->
          <el-table-column
            label="商品图"
            width="120"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 80px"
                :src="scope.row.img"
              />
            </template>
          </el-table-column>
          <!-- 商品名称 -->
          <el-table-column
            label="商品名称"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 5px">{{ scope.row.commName }}</span>
            </template>
          </el-table-column>
          <!-- 商品售价 -->
          <el-table-column
            label="商品售价"
            width="120"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <!-- 销量 -->
          <el-table-column
            label="销量"
            width="80"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sales }}</span>
            </template>
          </el-table-column>
          <!-- 库存 -->
          <el-table-column
            label="库存"
            width="80"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.stock }}</span>
            </template>
          </el-table-column>
          <!-- 排序 -->
          <el-table-column
            label="排序"
            width="80"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sorts }}</span>
            </template>
          </el-table-column>
          <!-- 状态管理 -->
          <el-table-column
            label="状态"
            width="80"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.value"
                active-color="#4381e6"
                inactive-color="#ff4949"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit( scope.row)"
              >恢复商品</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >永久删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

    </el-tabs>

    <!-- 弹框部分 -->
    <div class="diolag">
      <el-dialog
        title="商品管理"
        :visible.sync="dialogVisible"
        width="34%"
        :before-close="handleClose"
      >
        <!-- 弹框内内容展示部分 -->
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
          <el-form-item label="ID：">
            <el-input v-model="formLabelAlign.id" />
          </el-form-item>
          <el-form-item label="商品图：">
            <el-input v-model="formLabelAlign.img" />
          </el-form-item>
          <el-form-item label="商品名称：">
            <el-input v-model="formLabelAlign.commName" />
          </el-form-item>
          <el-form-item label="商品售价：">
            <el-input v-model="formLabelAlign.price" />
          </el-form-item>
          <el-form-item label="销量：">
            <el-input v-model="formLabelAlign.sales" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import axios from "../../utils/reuqest2.js"
import { GoodsList } from '../../api/index.js'
export default {
  data() {
    return {
      // 商品管理数据
      commidList: [],
      // 商品保存回收站数据
      recyleList: [],
      // 商品回收站的新数据
      recyNewList: [],
      // 控制弹框的显示隐藏
      dialogVisible: false,
      activeName: '',
      // 弹框组件内容
      labelPosition: 'right',
      formLabelAlign: {
        id: '',
        img: '',
        commName: '',
        price: '',
        sales: ''

      }
    }
  },
  computed: {

  },
  async created() {
    const res = await GoodsList()
    console.log('商品管理数据', res.allDataList)
    this.commidList = res.allDataList
    // this.handCommdList()
    // 请求后台商品管理数据
  },
  methods: {
    handleClick() {
      console.log(1)
    },
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true
      this.formLabelAlign = { ...row }
      this.formLabelAlign = row
    },
    // 加入商品回收站
    handleDelete(index, row) {
      this.commidList.splice(index, 1)
      this.recyleList.push(row)
      // 数组去重
      // const removeRepeat = (arr, key) => {
      //   const obj = {}
      //   arr = this.recyleList.reduce((pre, next) => {
      //     obj[next[key]] ? '' : obj[next[key]] = true && pre.push(next)
      //     return pre
      //   }, [])
      //   return arr
      // }
      // 根据id去重
      // let id
      // console.log(this.recyleList.push(row),"回收站数据")
    },
    // 请求商品管理数据
    handCommdList() {
      //  axios.post("/api/commodity").then(res=>{
      //    this.commidList=res.comodityList
      //  })
    },
    // 弹框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }

}
</script>
<style>

</style>
